<template>
    <div class="aside">
        <el-menu :default-active="active"
                 class="aside-menu"
                 @select="select"
                 :collapse="isCollapse">
            <template v-for="(item, index) in routes">
                <el-submenu :index="item.name" v-if="item.meta.unfold">
                    <template slot="title">
                        <i :class="item.meta.icon"></i>
                        <span slot="title">{{ item.meta.name }}</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item v-for="(child, j) in item.children"
                                      :key="j"
                                      :index="child.name" v-if="!child.meta.hide">
                            {{ child.meta.name }}
                        </el-menu-item>
                    </el-menu-item-group>
                </el-submenu>

                <el-menu-item :index="item.name" v-else>
                    <i :class="item.meta.icon"></i>
                    <span slot="title">{{ item.meta.name }}</span>
                </el-menu-item>
            </template>
        </el-menu>
    </div>
</template>

<script type="text/javascript">
    export default {
        name: "asideBar",
        data() {
            return {
                routes: [],
                isCollapse: false,
                active: ''
            }
        },
        watch: {
            $route () {
                this.setActive();
            }
        },
        created () {
            this.setActive();
        },
        methods: {
            // 侧边栏菜单激活
            select(key) {
                this.$router.push({
                    name: key
                })
            },

            // 设置当前菜单选中
            setActive () {
                // 获取 active name值
                let opt = this.$route.matched[0];
                if(opt.meta.unfold) {
                    this.active = this.$route.name;
                } else {
                    this.active = opt.name;
                }
            },

            // 更新侧边栏状态回调事件
            emit () {
                this.$eventBus.emit('updateCollapseCb', {
                    status: this.isCollapse
                });
            }
        },
        mounted() {
            const routes = this.$router.options.routes;

            this.routes = routes.filter(el => {
                return el.children && !el.meta.hide;
            });

            // 更新侧边栏展开和关闭
            this.$eventBus.on('updateCollapse', (data) => {
                this.isCollapse = data.status;
                this.emit();
            });
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss">
    .aside {
        background: #001529;
        overflow-x: hidden;
        overflow-y: auto;
        position: relative;

        &-menu:not(.el-menu--collapse) {
            width: 256px;
        }
    }

    .el-menu {
        border: none;
        background-color: #001529;

        .el-menu-item, .el-submenu__title {
            height: 56px;
            line-height: 56px;
        }

        .el-menu-item-group__title {
            display: none;
        }
        .el-menu-item-group {
            background-color: #000C17;

            .el-menu-item {
                height: 40px;
                line-height: 40px;
                padding-left: 50px !important;
            }
        }

        .el-menu-item {
            &.is-active {
                background-color: $background-primary-color;
                color: #fff;
            }
        }


    }
</style>
